<template>
<div class="role-list">
	<Form :model="formItem" ref="formItem" :inline="true" action="javascript:void(0)">
		<FormItem>
			<Input v-model="formItem.key" placeholder="输入关键词查找"></Input>
		</FormItem>
		<FormItem>
			<Button type="primary" @click="renderTable('formItem')">查找</Button>
		</FormItem>
	</Form>
    <!-- 批量操作 -->
    <div class="action-btn">
		<Button size="small" @click="removeMultiple()" style="margin-right: 8px" type="error">批量删除</Button>
		<Button size="small" @click="showModel()" type="success">添加角色</Button>
    </div>
    <Table border :columns="tableColumn" ref="roleList" :data="dataList" @on-selection-change="changeData($event)" :loading="dataLoading">
		<template #status="{ row }">
			<i-switch :true-value="1" :false-value="0" v-model="row.status" size="large" @on-change="changeStatus(row.id,$event)"></i-switch>
		</template>
		<template #action="{ row,index }">
			<Button type="success" size="small" style="margin-right: 5px;float:left" @click="showAdmin(row.id)">用户</Button>
			<Button type="warning" size="small" style="margin-right: 5px;float:left" @click="showPrivModal(row.id)">权限</Button>
			<Button type="info" size="small" style="margin-right: 5px;float:left" @click="showEditModal(row.id)">修改</Button>
			<Button type="error" size="small" @click="removeDetail(index,row.id)">删除</Button>
		</template>
	</Table>
    <!-- 分页 -->
    <div class="table-page">
        <Page size="small" ref="listPage" :total="pages.total" :model-value="pages.current" :page-size="pages.size" show-elevator show-total @on-change="changePage"></Page>
    </div>
    <!-- 需要全屏时添加这句 :mask="false" class-name="idw100" -->
    <Drawer :closable="false" :mask-closable="false" :scrollable="true" title="编辑角色" width="640" v-model="showModalStatus">
		<Spin size="large" fix v-if="loading"></Spin>
		<Form :label-width="80" :model="detailInfo" ref="roleValidate" :rules="roleValidate" action="javascript:void(0)">
			<FormItem label="角色名称" prop="name">
				<Input v-model="detailInfo.name" placeholder="输入角色名称"></Input>
			</FormItem>
			<FormItem label="角色状态">
				<i-switch :true-value="1" :false-value="0" v-model="detailInfo.status">
					<span slot="on">正常</span>
					<span slot="off">禁用</span>
				</i-switch>
			</FormItem>
			<FormItem>
				<Button style="margin-right: 8px" @click="showModalStatus = false">取消</Button>
				<Button type="primary" @click="handleSubmit('roleValidate')">提交</Button>
			</FormItem>
		</Form>
    </Drawer>
    <!-- 权限的弹出 -->
    <Drawer :closable="false" :mask-closable="false" :scrollable="true" title="修改权限" width="640" v-model="showPrivStatus">
		<Spin size="large" fix v-if="loading"></Spin>
		<Tree :data="privTree" ref="privSelect" show-checkbox multiple></Tree>
		<div class="drawer-footer">
			<Button style="margin-right: 8px" @click="showPrivStatus = false">取消</Button>
			<Button type="primary" @click="updatePriv">提交</Button>
		</div>
    </Drawer>
    <!-- 用户弹出 -->
    <Drawer :closable="false" :scrollable="true" title="修改权限" width="640" v-model="showAdminStatus">
		<Spin size="large" fix v-if="loading"></Spin>
		<Table border :columns="adminTableColumn" ref="adminList" :data="adminList" :loading="dataLoading">
			<template #action="{ row }">
				<Button type="warning" size="small" style="margin-right: 5px;float:left" @click="removeAdmin(index,row.id)">移出</Button>
			</template>
		</Table>
		<div class="drawer-footer">
			<Button style="margin-right: 8px" @click="showAdminStatus = false">关闭</Button>
		</div>
    </Drawer>
</div>
</template>

<script>
export default {
	name: 'RoleList',
	data() {
		return {
			loading: false,
			dataLoading: true,
			detailId: 0,
			formItem: {
				'key': ''
			},
			pages: {
				current: 1,
				total: 0,
				size:10
			},
			tableColumn: [
				{
					type: 'selection',
					width: 60,
					align: 'center'
				},
				{
					title: 'Id',
					key: 'id',
					width: 60,
				},
				{
					title: '名称',
					minWidth: 300,
					key: 'name'
				},
				{
					title: '状态',
					slot: 'status',
					width: 150,
				},
				{
					title: '操作',
					slot: 'action',
					width: 240,
					align: 'left',
				}
			],
			dataList: [],
			detailInfo: {
				name: '',
				status: 1
			},
			showModalStatus: false,
			showPrivStatus: false,
			showAdminStatus: false,
			roleValidate: {
				name: [
					{ required: true, message: '角色名称必须填写', trigger: 'blur' }
				]
			},
			privTree: [],
			selectData: [],
			adminList:[],
			adminTableColumn:[
				{
					title: '用户名',
					key: 'name'
				},
				{
					title: '手机号',
					key: 'phone'
				},
				{
					title: '操作',
					slot: 'action',
					width: 80,
					align: 'left',
				}
			],
		}
	},
	created: function() {
		this.getTableList();
	},
	methods: {
		changePage() {
			this.pages.current = this.$refs['listPage'].currentPage;
			this.getTableList();
		},
		getTableList() {
			var params = this.formItem;
            params.size = this.pages.size;
            params.page = this.pages.current;
            this.dataLoading = true;
			this.$api.role.list(params).then(res => {
                this.dataList = res.result.list;
                this.pages.total = res.result.count
			}).finally(e=>{
                this.dataLoading = false;
            });
		},
		renderTable() {
            this.pages.currentPage = 1;
            this.getTableList();
        },
		// 选择id
		changeData(index) {
			this.selectData = index
		},
		// 展开添加
		showModel() {
			this.showModalStatus = !this.showModalStatus;
			this.detailId = 0
			this.detailInfo = {
				name: '',
				status: 1
			}
		},
		showEditModal(id) {
			this.detailId = id;
			this.showModalStatus = !this.showModalStatus;
			// 取树形菜单
			this.$api.role.detail({ detailId: id }).then(res => {
                this.detailInfo = res.result;
			});
		},
		showPrivModal(id) {
			this.detailId = id;
			this.showPrivStatus = !this.showPrivStatus;
			// 取树形菜单
			this.$api.role.priv({ detailId: id }).then(res => {
                this.privTree = res.result;
			});
		},
		// 添加
		handleSubmit(name) {
			this.$refs[name].validate((valid) => {
				if (valid) {
					this.loading = true
					if (this.detailId == 0) {
						this.$api.role.create(this.detailInfo).then(res => {
                            this.getTableList();
						}).finally(e=>{
                            this.showModalStatus = !this.showModalStatus;
                            this.loading = false;
                        });
					}else{
						this.detailInfo.detail_id = this.detailId;
						this.$api.role.update(this.detailInfo).then(res => {
                            this.getTableList();
						}).finally(res => {
                            this.showModalStatus = !this.showModalStatus;
							this.loading = false;
						});
					}
				} else {
					this.$Message.error('请检查输入的信息是否正确！');
					this.loading = false;
				}
			})
		},
		// 删除
		removeDetail(index, id) {
			// 弹出确认框
			this.$Modal.confirm({
				title: '警告',
				content: '<p>此操作不可恢复，三思而后行</p>',
				onOk: () => {
					this.$api.role.remove({ detailId: id }).then(res => {
                        this.dataList.splice(index, 1);
					});
				}
			});
		},
		// 修改状态
		changeStatus(id, value) {
			this.$api.role.status({ id: id, status: value }).then(res => {});
		},
		updatePriv() {
			this.loading = true
			var node = this.$refs['privSelect'].getCheckedAndIndeterminateNodes()
			var menuIds = [];
			node.forEach((item, index) => {
				menuIds.push(item.menuId)
			});
			// 提交
			this.$api.role.updatepriv({ id: this.detailId, menuIds: menuIds }).then(res => {
                this.showPrivStatus = !this.showPrivStatus;
			}).finally(e=>{
                this.loading = false;
            });
		},
		// 批量删除
		removeMultiple: function() {
			this.$Modal.confirm({
				title: '警告',
				content: '<p>此操作不可恢复，三思而后行</p>',
				onOk: () => {
					var ids = [];
					this.selectData.forEach((item) => {
						ids.push(item.id);
					})
					this.$api.role.removemultiple({ detailIds: ids }).then(res => {
                        this.getTableList();
					});
				}
			});
		},
		showAdmin(id){
			this.showAdminStatus = !this.showAdminStatus;
			this.detailId = id;
			this.adminList = [];
			this.loading = true;
			this.$api.role.admins({detailId:id}).then(res => {
                this.adminList = res.result;
			}).finally(e=>{
                this.loading = false;
            });
		},
		// 删除
		removeAdmin: function(index,id) {
			// 弹出确认框
			this.$Modal.confirm({
				title: '警告',
				content: '<p>此操作不可恢复，三思而后行</p>',
				onOk: () => {
					this.$api.role.removeadmin({ adminId: id,id: this.detailId }).then(res => {
                        this.adminList.splice(index, 1);
					});
				}
			});
		},
	}
}
</script>
